<template>
  <view class="content">
    <view class="header">
      <image
        class="header-back"
        src="/static/activity/fanhui btn@2x.png"
        mode="aspectFit"
        @click="goBack"
      ></image>
      <text class="header-title">{{ title }}</text>
      <view style="width: 50rpx"></view>
    </view>

    <view class="me-head">
      <view
        class="me-tab"
        v-for="(item, index) in allList"
        @click="tabClick(index)"
        :class="index == tabsIndex ? 'active' : ''"
      >
        {{ item.name }}
      </view>
      <!-- <u-sticky bgColor="#fff">
			   <u-tabs :list="allList" lineColor="#07BCAD"
					:activeStyle="{color: '#07BCAD',fontWeight: 'bold',transform: 'scale(1.05)'}" @click="tabClick"></u-tabs>
			  </u-sticky> -->
    </view>
    <view class="" style="height: 188rpx"> </view>
    <view class="me-center">
      <view class="list-tab">
        <view
          class="item-ul"
          v-for="(item, index) in orderList"
          :key="index"
          @click="goInfo(item.id)"
        >
          <view>
            <view class="item-top">
              <view>
                <text>订单编号：</text>
                <text>{{ item.orderTradeId }}</text>
              </view>
              <view class="pay-type" :class="getStatusClass(item.tradeStatus)">
                <text>{{ allList[item.tradeStatus].name }}</text>
              </view>
            </view>

            <view class="item-content">
              <view class="item-left">
                <image
                  style="width: 180rpx; height: 180rpx"
                  :src="item.tradeImgUrl"
                  mode=""
                ></image>
              </view>
              <view class="item-right">
                <view class="item-right-v1">
                  <text class="item-title">{{ item.odName }}</text>
                </view>
                <view class="item-right-v1 induce">
                  <text class="rate-text1"
                    >名称：{{ item.tradeGoodsName }}</text
                  >
                </view>
                <view class="item-right-v1 induce">
                  <text class="rate-text1"
                    >下单时间：{{ timestampToTime(item.tradeTime) }}</text
                  >
                </view>
                <view class="item-right-v2">
                  <view class="v2-fh"
                    >￥<text class="v2-price">{{ item.tradePrice }}</text></view
                  >
                </view>
              </view>
            </view>

            <u-line dashed></u-line>
            <view class="item-btom" v-if="item.tradeStatus == 0">
              <view @click.stop="cancelClick(item)">
                <view class="item-btom-btn">取消</view>
              </view>
              <view @click.stop="payClick(item)">
                <view class="item-btom-btn pay">支付</view>
              </view>
            </view>

            <view class="item-btom" v-if="item.tradeStatus == 2">
              <view class="item-btom-btn" @click="evaluateClick(item)"
                >评价</view
              >
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 支付方式选择弹窗 -->
    <PaySelectPopup
      :show="isPayPopupVisible"
      :defaultMethod="selectedPayMethod"
      @close="closePayPopup"
      @confirm="onPayMethodConfirm"
    />
  </view>
</template>
<script>
import PaySelectPopup from "@/components/PaySelectPopup.vue";

export default {
  components: { PaySelectPopup },
  data() {
    return {
      tabsIndex: 0,
      allList: [
        {
          tabId: 0,
          name: "待支付",
        },
        {
          tabId: 1,
          name: "已支付",
        },
        {
          tabId: 2,
          name: "已取消",
        },
        {
          tabId: 3,
          name: "已退款",
        },
      ],
      orderList: [],
      offset: 1,
      isPayPopupVisible: false,
      selectedPayMethod: null,
      title: "活动订单",
    };
  },
  onLoad() {
    this.init();
  },
  onReachBottom(e) {
    //nvue暂不支持滚动监听，可用bindingx代替
    this.offset++;
    this.init();
  },

  methods: {
    goBack() {
      switch (uni.getSystemInfoSync().platform) {
        case "android":
          window.AndroidBridge.backEvent();
          console.log("运行Android上");
          break;
        case "ios":
          window.webkit.messageHandlers.backEvent.postMessage({});
          break;
        default:
          console.log("运行在开发者工具上");
          break;
      }
    },
    goInfo(id) {
      uni.navigateTo({
        url: "/pages/order/info?id=" + id,
      });
    },
    timestampToTime(timestamp) {
      let date = new Date(timestamp);
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      let h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      let m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      let s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    init() {
      // this.orderList=[]
      uni.app.post(
        "/activity/order/list",
        {
          limit: 10,
          offset: this.offset,
          tradeStatus: this.allList[this.tabsIndex].tabId,
          userId: uni.getStorageSync("userId"),
        },
        "json",
        "",
        (res) => {
          console.log(res, "res");
          if (res.code == 2000) {
            this.orderList = this.orderList.concat(res.data);
            // this.BasicData = res.data.records[0]
            // this.BasicData.author=this.BasicData.mediaList[0]
          }
        },
      );
    },
    tabClick(index) {
      this.orderList = [];
      this.tabsIndex = index;
      this.init();
    },
    getStatusClass(status) {
      return {
        "status-red": status == 1,
        "status-2": status == 2,
        "status-green": status == 3,
      };
    },

    // 取消
    cancelClick(item) {
      uni.showModal({
        title: "温馨提示",
        content: "确定要取消该订单吗？",
        cancelText: "取消",
        confirmText: "确定",
        success: (res) => {
          if (res.confirm) {
          }
        },
      });
    },

    payClick(item) {
      console.log("item===支付====", item);
      this.isPayPopupVisible = true;
      this.orderItem = item;
    },
    evaluateClick(item) {
      uni.navigateTo({
        url:
          "../order/OrderEvaluate?detailDate=" +
          encodeURIComponent(JSON.stringify(item)),
      });
    },
    closePayPopup() {
      this.isPayPopupVisible = false;
    },
    onPayMethodConfirm(method) {
      console.log("method", method);
      this.selectedPayMethod = method.value;
      this.isPayPopupVisible = false;
      uni.app.post(
        "/activity/order/affirmPay",
        {
          userId: uni.getStorageSync("userId"),
          payWay: Number(this.selectedPayMethod),
          orderId: this.orderItem.id,
        },
        "",
        "",
        (res) => {
          if (res.code == 2000) {
            uni.app.msg(res.message);
            setTimeout(() => {
              switch (this.selectedPayMethod) {
                case "1":
                  this.payNow(res.data);
                  break;
                case "2":
                  this.payNow(res.data);
                  break;
                case "4":
                  uni.navigateTo({
                    url: `/pages/hotspot/orderDetail?orderNo=${res.data.orderNo}`,
                  });
                  break;
              }
            }, 1000);
          }
        },
      );
    },
    payNow(data) {
      console.log(data);
      let ddd = {
        ...data,
        jumpUrl: `https://www.yaozhuasocial.com/yaozhua_shequ/#/pages/hotspot/orderDetail?id=${this.orderItem.id}`,
        paySource: "activity",
      };
      console.log(ddd);
      switch (uni.getSystemInfoSync().platform) {
        case "android":
          let d = JSON.stringify(ddd);
          console.log(d, "都是对的");
          window.AndroidBridge.aliPayForOrderStr(d);
          console.log("运行Android上");
          break;
        case "ios":
          window.webkit.messageHandlers.aliPayForOrderStr.postMessage(ddd);
          break;
        default:
          console.log("运行在开发者工具上");
          break;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.customNavBar {
  // position: sticky;
  // top: 0;
  position: fixed;
  top: 0%;
  left: 0;
  width: 100vw;
  height: 120rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26rpx;
  z-index: 1000;

  .leftBackHeader {
    display: flex;
    align-items: center;

    .backImg {
      width: 48rpx;
      height: 48rpx;

      image {
        width: 100%;
        height: 100%;
      }

      // margin-right: 16rpx;
    }

    .infoBox {
      display: flex;
      align-items: center;

      image {
        width: 64rpx;
        height: 64rpx;
        margin-right: 16rpx;
        border-radius: 50%;
      }

      text {
        font-weight: bold;
        font-size: 28rpx;
        color: #303030;
      }
    }
  }

  .rightShare {
    display: flex;
    align-items: center;

    .shareImg {
      width: 48rpx;
      height: 48rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .guanzhuBox {
      width: 180rpx;
      height: 48rpx;
      background: #d9f700;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      font-weight: bold;
      font-size: 28rpx;
      color: #303030;
      line-height: 48rpx;
      text-align: center;
      margin-right: 16rpx;
    }

    .actguanzhuBox {
      width: 180rpx;
      height: 48rpx;
      background: #f6f6f6;
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      font-weight: bold;
      font-size: 28rpx;
      color: #303030;
      line-height: 48rpx;
      text-align: center;
      margin-right: 16rpx;
    }
  }
}

.active {
  color: #4891d9 !important;
}

page {
  text-align: center;
  background-color: #f7f8fa;
}

.content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.me-head {
  position: fixed;
  top: 80rpx;
  z-index: 100;
  width: 100%;
  display: flex;
  justify-content: space-around;
  background: #fff;
  height: 100rpx;
  line-height: 100rpx;

  .me-tab {
    width: 100rpx;
  }
}

.me-center {
  flex: 1;
  overflow-y: auto;
  width: 100%;
  margin-top: 20upx;

  .pullScrollView {
    display: flex;
    flex-direction: column;
  }

  .list-tab {
    width: 93%;
    margin: 0 auto;

    .item-ul {
      margin-bottom: 20upx;
      background-color: #ffffff;
    }

    .item-ul {
      border-radius: 15upx;
      box-shadow: 0 0upx 6upx 0upx rgba(0, 0, 150, 0.2);
    }

    .item-top {
      display: flex;
      justify-content: space-between;
      padding: 20rpx;
      font-size: 28rpx;

      .pay-type {
        font-weight: bold;
      }

      .status-red {
        color: #ff5500;
      }

      .status-2 {
        color: #4891d9;
      }

      .status-green {
        color: #00d500;
      }
    }

    .item-content {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10upx 20upx;
    }

    .item-right {
      flex: 1;
      margin-left: 20upx;

      .item-right-v1 {
        width: 100%;
        padding: 8rpx 0;

        .item-title {
          font-weight: bold;
          display: -webkit-box;
        }
      }

      .induce {
        display: flex;
        align-items: center;

        .rate-text1 {
          font-size: 26rpx;
        }

        .rate-text2 {
          margin-left: 20rpx;
          font-size: 26rpx;
          color: #b9b9b9;
        }
      }

      .item-right-v2 {
        padding: 8rpx 0;
        display: flex;
        justify-content: space-between;
        color: #a3a3a3;
        font-size: 26upx;

        .v2-fh {
          color: #ff5500;
          font-size: 22upx;
        }

        .v2-price {
          color: #ff5500;
          font-weight: bold;
          font-size: 32upx;
        }
      }
    }

    .item-btom {
      display: flex;
      justify-content: flex-end;
      padding: 20rpx 10upx;
      font-size: 28upx;

      .item-btom-btn {
        padding: 6upx 40upx;
        border: 1px solid #d2d3d4;
        border-radius: 40upx;
        margin-right: 20upx;
        align-items: center;
      }

      .pay {
        background-color: #07bcad;
        border: 1px solid #07bcad;
        color: #ffffff;
      }
    }
  }
}

.header {
  height: 88rpx;
  width: 750rpx;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20rpx;

  .header-back {
    width: 50rpx;
    height: 50rpx;
  }

  .header-title {
    height: 88rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    flex: 1;
    text-align: center;
  }
}
</style>
